/**
 * Author: Shen Yanqiu
 * Date: 2018-02-26
 * Time: 13:44
 *
 */
import React from 'react';
import { Page } from 'components';
import { Upload, Icon, message, Row, Col, Button } from 'antd';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import styles from './style.less';

const Dragger = Upload.Dragger;

class RecruitnewStatisticsUploadTableFile extends React.Component {
  static propTypes = {
    loading: PropTypes.object,
    dispatch: PropTypes.func,
    recruitnewStatisticsUploadTableFile: PropTypes.object,
  };
  render () {
    const { loading, recruitnewStatisticsUploadTableFile, dispatch } = this.props;
    const { uploadFiles } = recruitnewStatisticsUploadTableFile;
    const updateFilesInRedux = (fileList) => {
      dispatch({
        type: 'recruitnewStatisticsUploadTableFile/updateUploadFiles',
        payload: {
          uploadFiles: fileList,
        },
      });
    };
    const uploadProps = {
      name: 'file',
      multiple: true,
      action: '//jsonplaceholder.typicode.com/posts/',
      fileList: uploadFiles,
      beforeUpload (file) {
        console.log(file);
        const type = file.type;
        if (type === "application/pdf"
          || type === "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
          || type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
          || type === "application/msword"
          || type === "application/vnd.ms-excel"
        ) {
          return true;
        }
        message.error("请上传正确格式的文件！");
        return false;
      },
      onChange (info) {
        updateFilesInRedux(info.fileList);
        const status = info.file.status;
        if (status !== 'uploading') {
          console.log(info.file, info.fileList);
        }
        if (status === 'done') {
          message.success(`${info.file.name} 上传成功！.`);
        } else if (status === 'error') {
          message.error(`${info.file.name} 上传失败！.`);
        }
      },
    };
    const createHandler = () => {
      dispatch({
        type: 'recruitnewStatisticsUploadTableFile/createQRCode',
      });
    };
    return (
      <Page loading={loading.effects['recruitnewStatisticsUploadTableFile/firstLoad']}>
        <div className={styles.recruitnewStatisticsUploadTableFile}>
          <Row type={"flex"} justify={"center"} align={"middle"}>
            <Col span={8} className={styles.uploadBlock}>
              <Dragger {...uploadProps} className={styles.draggerBlock}>
                <p className="ant-upload-drag-icon">
                  <Icon type="cloud-upload-o" />
                </p>
                <p className="ant-upload-text">点击或将文件拖拽到这里上传</p>
                <p className="ant-upload-hint">支持文件：excel、word、pdf</p>
              </Dragger>
              <Button type={"primary"} className={styles.btnStyle} onClick={createHandler}>生成招新二维码</Button>
            </Col>
          </Row>
        </div>
      </Page>
    );
  }
}
export default connect(({ loading, recruitnewStatisticsUploadTableFile }) => ({ loading, recruitnewStatisticsUploadTableFile }))(RecruitnewStatisticsUploadTableFile);
